<template>
    <sub-box>
        <breadcrumb :title="'申请详情'"></breadcrumb>
        <div v-loading="loading" class="mt20">
            <div class="box white-block" v-if="detail&&detail.flowList[0]">
                <el-timeline>
                    <el-timeline-item
                        :type="((list.operType==1 || list.operType==2) || (!list.operType && list.result==1) || list.implementationState==0)?'primary':((!list.operType && list.result==2) || list.state==1?'success':'danger')"
                        v-for="(list,index) in detail.flowList" :key="index">
                        <div class="timeline-card" v-if="!list.order">
                            <el-card class="mr20">
                                <template v-if="list.operType">
                                    <p class="time" v-if="list.operType==1">已提交申请</p>
                                    <p class="time" v-if="list.operType==2">重新提交申请</p>
                                    <p class="time" v-if="list.operType==3">已取消</p>
                                </template>
                                <template v-else-if="list.result">
                                    <p class="time" v-if="list.result==1">待审核</p>
                                    <p class="time" v-else-if="list.result==2">审核通过</p>
                                    <p class="time" v-else-if="list.result==3">审核不通过</p>
                                </template>
                                <p class="name clearfix">
                                    <span>{{list.modifyTime || list.createTime}}</span>
                                    {{list.deptName}}
                                    <i v-if="list.approvalName">{{list.approvalName}}</i>
                                    <!--                                    {{list.opUserDept}}-->
                                    <!--                                    <i v-if="list.opUserName">{{list.opUserName}}</i>-->
                                </p>
                                <!--                                <p class="remark" :class="{error:list.type==3}" v-if="list.auditOpinion">-->
                                <!--                                    审核说明：{{list.auditOpinion}}-->
                                <!--                                </p>-->
                                <p class="remark" :class="{error:list.type==3}" v-if="list.opinion">
                                    审核说明：{{list.opinion}}
                                </p>
                            </el-card>
                            <div class="timeline-btn"></div>
                        </div>
                        <div class="timeline-card" v-else>
                            <el-card class="mr20">
                                <template>
                                    <p class="time">
                                        <!--                                        {{list.state==0?'实施中':(list.implementationState==1?'实施已完成':(list.implementationState==2?'实施已中止':'实施已回收'))}}-->
                                        {{list.state == 0? '待实施':'实施完成'}}
                                    </p>
                                </template>
                                <p class="name clearfix" v-if="list.state!=0">
                                    <span>{{list.modifyTime || list.createTime}}</span>
                                    {{list.deptName}}
                                    <i v-if="list.approvalName">{{list.approvalName}}</i>
                                </p>
                                <p class="remark" :class="{error:list.type==3}" v-if="list.opinion">
                                    审核说明：{{list.opinion}}
                                </p>
                            </el-card>
                            <div class="timeline-btn"></div>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="box-th white-block mt20" v-if="detail">
                <div class="form-common clearfix">
                    <div class="form-item">
                        <div class="form-item-label">自建系统名称</div>
                        <div class="form-item-content">{{detail.appName}}</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">自建系统代码</div>
                        <div class="form-item-content">{{detail.appCode}}</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">自建系统描述</div>
                        <div class="form-item-content">{{detail.description}}</div>
                    </div>
                </div>
            </div>
            <div class="box-th white-block mt20" v-if="detail">
                <table-example :data="detail.ipList" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                    <template slot="type" slot-scope="scope">
                        <span v-if="scope.row.type==0">新增</span>
                        <span v-if="scope.row.type==1">修改</span>
                        <span v-if="scope.row.type==2">删除</span>
                    </template>
                    <template slot="oldResName" slot-scope="scope">
                        <p v-for="(item,value) in scope.row.oldResName" :key="value">{{item}}</p>
                    </template>
                    <template slot="newResName" slot-scope="scope">
                        <p v-for="(item,value) in scope.row.newResName" :key="value">{{item}}</p>
                    </template>
                    <template slot="oldIP" slot-scope="scope">
                        <template v-if="scope.row.oldIP">
                            <p v-for="(ip, index) in scope.row.oldIP.split(',')" :key="index">
                                {{ip}}
                            </p>
                        </template>
                    </template>
                    <template slot="newIP" slot-scope="scope">
                        <template v-if="scope.row.newIP">
                            <p v-for="(ip, index) in scope.row.newIP.split(',')" :key="index">
                                {{ip}}
                            </p>
                        </template>
                    </template>
                </table-example>
            </div>
            <div class="white-block mt20" v-if="detail&&detail.flowResult==1">
                <audit @save="auditSave" @del="$method.historyBack()" :labelWidth="'90px'" :showBtn="true"></audit>
            </div>
        </div>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import audit from '../../components/audit'

    export default {
        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'type',
                        label: '类型',
                        minWidth: '10%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'oldIp',
                        label: '原IP地址',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'oldResName',
                        label: '原绑定服务',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'newIp',
                        label: '新IP地址',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'newResName',
                        label: '新绑定服务',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    }

                ],
                id: '',
                applyNo: '',
                slotColumns: ['type', 'oldResName', 'newResName', 'newIP', 'oldIP'],
                loading: false,
                detail: null
            }
        },
        mounted() {
            if (this.$route.query.id) this.id = this.$route.query.id
            if (this.$route.query.applyNo) this.applyNo = this.$route.query.applyNo
            this.getDetail()
        },
        watch: {
            // detail(val) {
            //     val.flowList.reverse()
            // }
            detail(val) {
                val.flowList.reverse()
                if (val.rdIpImpleOrder && val.rdIpImpleOrder.state !== null) {
                    val.flowList.unshift(
                        {
                            order: true, // 区分是实施工单
                            ...val.rdIpImpleOrder
                        }
                    )
                }
            }
        },
        methods: {
            getDetail() {
                this.loading = true
                this.$http.get('/deptAdmin/getIpApplyInfo', {
                    id: this.id,
                    applyNo: this.applyNo
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.detail = result.data
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            auditSave(form, list, callback) {
                this.loading = true
                this.$http.post('/deptAdmin/ipOrderApproval', {
                    ipApplyNo: this.detail.applyNo,
                    remark: form.remark,
                    result: form.state
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.$emit('upload')
                        if (callback) callback()
                        this.$nextTick(() => {
                            this.$method.historyBack()
                        })

                    }
                }).catch(() => {
                    this.loading = false
                })
            }
        },
        components: {
            subBox,
            breadcrumb,
            tableExample,
            audit
        }
    }
</script>
<style scoped lang="less">
    .box {
        padding: 30px 20%;

        .timeline-card {
            display: inline-flex;
            align-items: center;
            width: 100%;

            > * {
                flex: auto;
            }

            .el-card {
                width: 80%;
            }

            .timeline-btn {
                width: 20%;

                button {
                    border-radius: 20px;
                }
            }
        }

        .time {
            font-size: 18px;
            margin-bottom: 3px;
        }

        .name {
            span {
                float: right;
            }
        }

        .remark {
            color: #999;

            &.error {
                color: #E00000;
            }
        }

    }
</style>
